<template>
    <div class="bigbox">
        <div class="text">评论</div>
        <div>
            <a-rate v-model="value" />
            <span class="good">非常好</span>
        </div>
        <textarea class="comment">请发表您对课程的评价</textarea>
        <div>
            <a-button type="primary" style="float: right;margin-top: 20px;height: 32px;background-color: #00cf8c;border-radius: 2px">
                发表评论
            </a-button>
        </div>
        <div style="clear:both"></div>
        <div>
            <commentList :commentList="commentList"></commentList>
        </div>
        <div style="text-align: center">
            <a-pagination v-model="current" :total="commentList.length" show-less-items />
        </div>
    </div>
</template>
<script>
    import commentList from "./commentList"
    import {getComment} from "../utils/getComment"
    export default {
        components:{
            commentList
        },
        data() {
            return {
                value: 5,
                current: 2,
                commentList:[]
            };
        },
        props:{
            courseId:{
                type:Number,
                default:103
            }
        },
        created() {
            getComment(this.courseId).then(
                (res)=>{
                    this.commentList=res.data.rows
                }
            )
        }
    };
</script>
<style lang="less" scoped>
    .bigbox{
        width: 100%;
        /*height: 500px;*/
        padding: 0 25px;
        /*background-color: red;*/
    }
    .text{
        margin-bottom: 10px;
    }
    .comment{
        width: 100%;
        height: 140px;
        margin-top: 15px;
        outline: none;
        resize: none;
        border: 1px solid #ccc;
        border-radius: 2px;
    }
    .good{
        display: inline-block;
        margin-left: 10px;
    }
</style>

